'use strict';
import React, {Component} from 'react';
import {Modal, Slider, StyleSheet, Text, TouchableNativeFeedback, View,} from 'react-native';
import * as Color from "../../constant/Color";

/** 定制SeekBar弹出框 */
export default class CustomSliderModal extends Component {

    /** 步幅 */
    step:number;
    /** 最小 */
    min:number;
    /** 最大 */
    max:number;

    constructor(props) {
        super(props);
        this.state = {
            modalVisible: false,    // 输入框可见性
            title: '',          // 输入框标题
            value: {},          // 数据源
            datas: [],          // 默认值
            index: 0,
        }
    }


    render() {
        let modalBackgroundStyle = { backgroundColor: 'rgba(0, 0, 0, 0.5)', };

        if(this.state.modalVisible){
            return (
                <Modal
                    animationType   = {'fade'}
                    transparent     = {true}
                    visible         = {this.state.modalVisible}
                    onRequestClose  = {() => this.setModalVisible(false)}>

                    <View style={[styles.modal, modalBackgroundStyle]}>
                        <View style={styles.container}>
                            <View style={styles.titleView}>
                                <Text style={styles.titleText}>{this.state.title}</Text>
                            </View>

                            <View style={styles.valueView}>
                                <Text style={styles.titleInfo}>{this.state.value.toString()}</Text>
                            </View>

                            <Slider
                                style={styles.inputView}
                                minimumTrackTintColor={Color.colorPrimary}
                                thumbTintColor={Color.colorPrimary}
                                value={this.state.index}
                                step={this.step}
                                minimumValue={this.min}
                                maximumValue={this.max}
                                onValueChange={(index)=>{
                                    this.onValueChange(index)
                                }}/>

                            <View style={styles.buttonView} >
                                <TouchableNativeFeedback
                                    background={TouchableNativeFeedback.SelectableBackground()}
                                    onPress={() => this._doCancel()}>
                                    <View style={styles.buttonItemView}>
                                        <Text style={styles.btnText}>取消</Text>
                                    </View>
                                </TouchableNativeFeedback>

                                <View style={styles.divide}/>

                                <TouchableNativeFeedback
                                    background={TouchableNativeFeedback.SelectableBackground()}
                                    onPress={() => this._doSubmit()}>
                                    <View style={styles.buttonItemView}>
                                        <Text style={styles.btnText}>确定</Text>
                                    </View>
                                </TouchableNativeFeedback>
                            </View>
                        </View>
                    </View>
                </Modal>
            );
        }
        else return <View/>
    }

    mPressFuc(){};                // 点击方法回调

    /** 点击取消 */
    _doCancel(){
        this.setModalVisible(false);
    }

    /** 点击确定 */
    _doSubmit(){
        if(!this.mPressFuc) return;
        // if(!this.state.datas.includes(defaultValue)) return;
        this.mPressFuc(this.state.index);
        this.setModalVisible(false);
    }

    /** 控制是否显示 */
    setModalVisible = (visible:boolean) => {
        this.setState({modalVisible: visible});
    };

    /** 设置标题与初始数据,并显示 */
    setDatasAndShow = (title:string, defaultValue:Object, datas:Array, onPress:Function) => {
        if(onPress) this.mPressFuc = onPress;
        this.init(defaultValue, datas);

        let index = datas.indexOf(defaultValue);
        if(index < 0) return;

        this.setState({
            title:  title       ? title         : '',
            value:  defaultValue? defaultValue  : {},
            datas:  datas       ? datas         : [],
            index:  index,
            modalVisible: true,
        });
    };

    /** 初始化 */
    init(defaultValue:Object, datas:Array):void{
        this.step   = 1;
        this.min    = 0;
        this.max    = Math.max(datas.length - 1, 0);
    }

    /** 初始化 */
    onValueChange(index:number = 0):void{
        let obj = this.state.datas[index];
        if(typeof obj === undefined) return
        this.setState({
            index: index,
            value: obj,
        });
    }
}

//样式定义
const styles = StyleSheet.create({
    modal: {
        flex: 1,
        flexDirection:'column',
        justifyContent: 'flex-end',
        // alignItems: 'center',
    },
    container: {
        justifyContent: 'flex-end',
        backgroundColor:Color.windowWhite,
        borderRadius:5,
        margin:4,
    },
    titleView:{
        padding:12,
        borderColor: Color.lightGray,
        borderBottomWidth:0.5,
        alignItems:'flex-start',
        justifyContent: 'center',
    },
    valueView:{
        alignItems:'center',
        justifyContent: 'flex-start',
    },
    titleText:{
        fontSize:20,
        color:Color.darkGray,
    },
    titleInfo:{
        fontSize:20,
        color:Color.colorPrimary,
        margin:12,
    },
    inputView:{
        margin:12,
        paddingTop:5,
        paddingBottom:5,
    },
    containerItemText:{
        fontSize:17,
        color:'#3bd729',
    },
    buttonView:{
        flexDirection:'row',
        alignItems:'center',
        justifyContent: 'center',
        borderColor: Color.lightGray,
        borderTopWidth:0.5,
    },
    buttonItemView:{
        flex:1,
        height:45,
        alignItems:'center',
        justifyContent: 'center',
    },
    divide:{
        width:1,
        height:30,
        backgroundColor:Color.lightGray,
    },
    btnText:{
        fontSize:16,
        color:Color.colorPrimary,
    },
});

